<template>
    <div class="block report-list journal-list">
        <div class="container" v-for="item in newsData" :key="item.id">
            <div class="journal-item">
                <div class="media">
                    <div class="media-left">
                        <div class="img-box">
                            <div class="img">
                                <img :src="item.image" :alt="item.name">
                            </div>
                            <!-- <div class="card-badge">pdf</div> -->
                        </div>
                    </div>
                    <div class="media-body">
                        <div class="journal-title" v-text="item.name">
                        </div>
                        <div class="journal-info">
                            <span v-html="item.context"></span>
                        </div>
                        <div class="journal-info">
                            <span v-text="item.createTime"></span>
                        </div>
                        <div class="journal-more">
                            <p class="more-btn btn-small" @click="clickItem(item.id)">查看更多</p>

                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <div class="paging">
        <el-pagination v-model:current-page="currentPage" @current-change="handelCurrentChange" background
            layout="prev, pager, next" :total="total" class="mt-4" />
    </div>
</template>
<script setup lang="ts">
import { getNewsList } from '../../api/home/news'
import type { NewsModel } from '@/api/home/news'
const currentPage = ref<number>(1)
const newParam = ref<any>({ pageNum: currentPage.value, pageSize: 10 });
const newsData = ref<NewsModel[]>([{ name: '', context: '', pushDate: '', image: '', id: '', intro: '', createTime: '' }])



onMounted(async () => {
    lists()

})
const total = ref<number>(0)
async function lists() {
    const res = await getNewsList(newParam.value)
    console.log(res, 'resss')
    if (res.code == 200) {
        newsData.value = res.data?.records ?? []
        total.value = res.data?.total ?? 0
        currentPage.value = res.data?.current ?? 1
    }
}


function handelCurrentChange(pageNum: number) {
    newParam.value.pageNum = pageNum
    lists()
}
const router = useRouter()
function clickItem(id: number) {
    router.push(`/broadcastItem/${id}`)
}


</script>
<style scoped lang='less'>
:deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: #72246C
}

.block {
    padding: 60px 0;
    position: relative;
    width: 100%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 99;
}

.container {
    width: 1300px;
    margin: 0 auto;
}

.journal-list .journal-item {
    border-bottom: 1px solid #dedede;
    padding-bottom: 30px;
    margin-bottom: 30px !important;
    position: relative;
}

.journal-list .journal-item {
    max-width: 1060px;
    margin: 0 auto;
}

.media:first-child {
    margin-top: 0;
}

.media,
.media-body {
    overflow: hidden;
    zoom: 1;
}

.media-body,
.media-left,
.media-right {
    display: table-cell;
    vertical-align: top;
}

.journal-list .media-left {
    padding-right: 30px;
}

.journal-list .media-left .img-box {
    position: relative;
    width: 200px;
    margin: 0 auto;
}

.journal-list .media-left .img {
    position: relative;
    border-radius: 0px 0px 75px;
    overflow: hidden;
}

.journal-list .card-badge {
    background-color: rgb(114, 36, 108);
    bottom: 0px;
    color: rgb(255, 255, 255);
    font-weight: 900;
    font-size: 8px;
    height: 42px;
    letter-spacing: -0.2px;
    line-height: 40px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    right: -2px;
    width: 42px;
    z-index: 10;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 50%;
}

.journal-list .media-left img {
    width: 200px;
    max-width: 10000px;
}

.media-body,
.media-left,
.media-right {
    display: table-cell;
    vertical-align: top;
}

.journal-list .journal-item .journal-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
}

.journal-list .journal-item .journal-info {
    color: grey;
    padding-bottom: 60px;
}

.journal-info {
    >span {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
}

.journal-list .journal-item .journal-more {
    position: absolute;
    right: 0;
    bottom: 30px;

}



.journal-list .journal-item .journal-more a:first-child {
    margin-left: 0;
}

.journal-list .journal-item .journal-more a {
    display: inline-block;
    margin-left: 20px;
    text-align: center;
}

.more-btn.btn-small,
a.more-btn.btn-small {
    padding: 12px 40px;
}

.more-btn,
a.more-btn {
    display: inline-block;
    padding: 12px 50px;
    color: #fff;
    background-color: #72246C;
    overflow: hidden;
    position: relative;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    white-space: nowrap;
    vertical-align: middle;
    margin-top: 20px;
    text-align: center;
    cursor: pointer;
}

.paging {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 20px;
}
</style> 